<template>
	<div class="container">
		<Scrolls :name="scrollName" @sole="sole" ref="scroll">
			<div class="inner-container">
				<!-- 最近看过的频道 -->
				<template v-if="historyChannelLen && !flag">
					<Title name="最近看过的频道" :total="historyChannelLen"/>
					<div class="history-box">
						<HistoryChannel :list="historyChannel" :index="historyIndex"/>
						<Ctrls :index="historyIndex" :pages="historyPages" @handleCtrl="handleCtrl"/>
					</div>
				</template>
				
				<!-- 当前频道头部信息 -->
				<Title :name="flag?'搜索结果':channel.name" :total="total"/>
				<!-- <Refresh v-if="isHot" @refresh="refreshChannel"/> -->
				<!-- 热门频道列表，原网站暂时又不见了该模块 -->
				<!-- <HotChannel v-if="isHot" :list="channelLists" @handlerChannel="handlerChannel"/> -->
				
				<!-- 视频展示 -->
				<ChannelVideo :video="channelVideo" @handlerVideo="handlerVideo"/>
			</div>
			
			<Stick :name="scrollName" @handler="handlerStick"/>
			
			<div class="nomore">
				<span class="loading" v-if="$root.loading">加载中...</span>
				<span class="nothing" v-if="!hasMore && total>0" @click="$router.go(0)">已经没有更多了，点击刷新试试!</span>
			</div>
		</Scrolls>
	</div>
</template>

<script>
import Title from './Title'
import HotChannel from './HotChannel'
import HistoryChannel from './HistoryChannel'
import Ctrls from '@/components/Public/Ctrls.vue'
import Refresh from './Refresh'
import ChannelVideo from './ChannelVideo'
import {mapState} from 'vuex'

export default{
	name: 'ChannelContainner',
	data(){
		return{
			scrollName: 'channel',
			// 为true时代表是搜索数据，false频道切换数据
			flag: false,
			// 控制显示第几页的更多频道分类,
			index: 0,
			// 控制搜素关键词数据显示第几页
			searchPage: 1,
			// 历史记录的页码
			historyIndex: 0
		}
	},
	methods:{
		// 置顶功能，调用scroll组件的方法实现
		handlerStick(){
			this.$refs.scroll.scrollTo(0);
		},
		
		
		// 热门频道发现更多 切换页码
		refreshChannel(){
			let index = this.index;
			this.index = index<19 ? index+1 : 0;
		},
		// 历史记录左右切换列表
		handleCtrl(index){
			this.historyIndex += index;
		},
		
		
		// 异步获取视频数据，发现频道列表数据到仓库
		getData(){
			let channelVideo = {
				where: 'channel/getChannelVideo', 
				url: '/x/web-interface/web/channel/category/channel_arc/list?id='+this.channel.id
			}
			let channelList = {
				where: 'channel/getChannelList', 
				url: '/x/web-interface/web/channel/category/channel/list?id=100&offset=0&page_size=100'
			}
			this.$store.dispatch('global/request', channelVideo);
			this.$store.dispatch('global/request', channelList);
			this.$store.commit('users/getHistoryChannel');
		},
		
		
		// 根据频道id或搜索词获取数据
		getChannelVideo(val){
			let url = '/x/web-interface/web/channel/';
			let where = 'channel/getChannelVideo';
			if(this.flag){
				url += 'search?keyword='+ val +'&page_size=10&page=' + this.searchPage;
			}else{
				url += 'category/channel_arc/list?id=' + val;
			}
			this.$store.dispatch('global/request', {where, url});
		},
		// 触底事件，加载一段数据，没有就提醒刷新
		sole(){
			if(!this.hasMore) return;
			let url = '/x/web-interface/web/channel/';
			if(this.flag){
				this.searchPage ++;
				url += 'search?keyword='+ this.channel.name +'&page_size=10&page=' + this.searchPage;
			}else{
				url += 'category/channel_arc/list?id='+this.channel.id+'&offset='+(this.channelVideo.length+1);
			}
			this.$store.dispatch('global/request', {where: 'channel/getMore', url});
		},
		// 点击视频进行跳转与保存历史记录
		handlerVideo(video, msg){
			this.$store.commit('users/setHistoryVideo', video);
			this.$store.commit('users/setHistoryChannel', msg);
			window.open('https://www.bilibili.com/video/' + video.bvid);
		}
	},
	computed:{
// 历史观看频道类
		historyChannel(){
			return this.$store.state.users.historyChannel;
		},
		historyChannelLen(){
			return this.historyChannel.length;
		},
		historyPages(){
			return Math.ceil(this.historyChannelLen/5);
		},
		
		...mapState('channel', ['channel', 'total', 'channelVideo', 'channelList', 'searchWord']),
		// 显示的频道列表数据
		channelLists(){
			return this.channelList.slice(this.index*5, (this.index+1)*5);
		},
		
		// 是否还有更多数据
		hasMore(){
			return this.channelVideo.length < this.total;
		},
		// 当前是否为热门频道，是则显示一些东西
		isHot(){
			return this.channel.id==100 && !this.flag;
		}
	},
	watch:{
		// 切换频道，数据重新获取切换，滚动条归零
		channel:{
			immediate: true,
			deep: true,
			handler(item){
				if(item.id == 9999){
					this.flag = true;
					this.page = 1;
					this.getChannelVideo(item.name);
				}else{
					this.flag = false;
					this.getChannelVideo(item.id);
				}
				this.$store.commit('global/setScrolls', {name: 'channel', val: 0});
			}
		}
	},
	components:{
		Title,
		HotChannel,
		HistoryChannel,
		Ctrls,
		Refresh,
		ChannelVideo
	},
	mounted(){
		this.getData();
	}
}
</script>

<style lang="less" scoped>
.container{
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: #eee;
	.sc::-webkit-scrollbar {
		width: 4px;
	}
	.inner-container{
		padding: 0 50px;
		width: 890px;
		margin: 50px auto;
		.channel-header{
			display: flex;
			justify-content: space-between;
			height: 24px;
			line-height: 24px;
			margin-bottom: 20px;
		}
		.history-box{
			position: relative;
			width: 100%;
		}
	}
	.nomore{
		text-align: center;
		span{
			line-height: 20px;
			font-size: 16px;
			color: var(--cblue);
			border-bottom: 2px solid var(--cblue);
			cursor: pointer;
		}
		.loading{
			border-bottom: 0;
		}
	}
}
</style>
